<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link rel="stylesheet" href="${path }/resource/css/pc/normalize.css" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css"
	rel="stylesheet">
<link rel="stylesheet" href="${path }/resource/css/pc/common.css" />
<link rel="stylesheet" href="${path }/resource/font/iconfont.css" />

<link rel="shortcut icon" href="${浏览器logo }">
<style>
.m-title {
	text-align: center;
	font-size: 24px;
	color: #444444;
	margin-bottom: 10px;
}

.m-subTitle {
	text-align: center;
	font-size: 16px;
	color: #848484;
	margin-bottom: 35px;
}

.carousel .iconfont {
	position: absolute;
	top: 48%;
	font-size: 30px;
	color: rgba(255, 255, 255, 0.8);
}

.common-pad {
	padding: 40px 0 60px;
}
/*服务*/
.service-list {
	text-align: center;
	background: #ffffff;
	margin: 0 10px 0;
	padding: 20px 0;
	color: #999999;
	position: relative;
}

.service-list:nth-of-type(1) .iconfont {
	background: rgba(91, 183, 240, 0.7);
}

.service-list:nth-of-type(2) .iconfont {
	background: rgba(236, 155, 90, 0.7);
}

.service-list:nth-of-type(3) .iconfont {
	background: rgba(204, 128, 98, 0.7);
}

.service-list:nth-of-type(4) .iconfont {
	background: rgba(139, 131, 194, 0.7);
}

.service-list:nth-of-type(5) .iconfont {
	background: rgba(0, 130, 206, 0.7);
}

.service-list .iconfont {
	display: inline-block;
	font-size: 50px;
	padding: 20px;
	border-radius: 50%;
	color: #ffffff;
	margin-bottom: 10px;
}

.service-list .tit {
	font-size: 16px;
	padding-bottom: 20px;
	margin-bottom: 15px;
	margin-top: 10px;
	position: relative;
	color: #444444;
}

.service-list .tit:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0px;
	width: 50px;
	margin-left: -25px;
	height: 1px;
	background-color: #444444;
}

.service-list .con p {
	line-height: 30px;
}

.gray-bg {
	background: rgb(255, 250, 246);
}

.company {
	align-items: center;
}

.company img {
	width: 42%;
	height: 350px;
	margin-right: 30px;
	/*flex: 0 0 400px;*/
}

.company .introduction {
	
}

.company .introduction h2 {
	font-size: 20px;
	padding-bottom: 30px;
	position: relative;
	color: #444444;
}

.company .introduction h2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100px;
	height: 1px;
	background: #666666;
}

.company .introduction p {
	font-size: 15px;
	margin-top: 35px;
	line-height: 25px;
	color: #999999;
}

.more {
	margin-top: 40px;
	padding: 0 50px;
	display: inline-block;
	text-align: center;
	height: 40px;
	line-height: 40px;
	color: #8c8c8c;
	border: 1px solid #8c8c8c;
}

.news {
	overflow: hidden;
}

.news-list {
	width: 50%;
	float: left;
	align-items: center;
	padding-right: 50px;
	margin-bottom: 35px;
}

.news-list .article {
	
}

.news-list .article h2 {
	font-size: 18px;
	color: #444444;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.news-list .article h2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 200px;
	height: 1px;
	background: #666666;
}

.news-list .article p {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #999;
}

.news-list .time {
	color: #ffffff;
	text-align: center;
	width: 90px;
	height: 90px;
	background: #c3c2c2;
	flex: 0 0 90px;
	margin-left: 40px;
}

.news-list .time .em {
	margin-top: 8px;
	font-size: 38px;
}

.news .more {
	margin-top: 25px;
}

.cases {
	overflow: hidden;
}

.cases .case-list {
	flex: 1;
	margin: 10px;
	padding: 15px;
	align-items: center;
	border: 1px solid #444444;
}

.cases .case-list img {
	width: 100%;
	display: block;
	height: 220px;
}

.cases .case-list .txt {
	padding: 15px;
	color: #3f4042;
}

.cases .case-list .txt p {
	text-align: justify;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.cases .more {
	margin-top: 55px;
}
</style>
</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<div id="carousel-example-generic" class="carousel slide"
		data-ride="carousel">
		<ol class="carousel-indicators">
			<cms:ad var="pcsylbt" code="pcsylbt"></cms:ad>
			<c:forEach items="${pcsylbt }" varStatus="count">
				<c:if test="${count.index==0 }">
					<li data-target="#carousel-example-generic"
						data-slide-to="${count.index}" class="active"></li>
				</c:if>
				<c:if test="${count.index!=0 }">
					<li data-target="#carousel-example-generic"
						data-slide-to="${count.index}"></li>
				</c:if>
			</c:forEach>
		</ol>

		<div class="carousel-inner">
			<c:forEach items="${pcsylbt }" varStatus="count" var="item">
				<c:if test="${count.index==0 }">
					<div class="  item active">
						<img class="zy" data-type="ad" data-id="${item.adId }"
							src="${item.adImg }" alt="${item.adTitle }">
					</div>
				</c:if>
				<c:if test="${count.index!=0 }">
					<div class="zy item">
						 <img class="zy"
							data-type="ad" data-id="${item.adId }" src="${item.adImg }"
							alt="${item.adTitle }"> 
					</div>
				</c:if>
			</c:forEach>
		</div>
		<a class="left carousel-control" href="#carousel-example-generic"
			role="button" data-slide="prev"> <span
			class=" iconfont icon-zuojiantou"></span>
		</a> <a class="right carousel-control" href="#carousel-example-generic"
			data-slide="next"> <span class=" iconfont icon-iconfontjiantou6"></span>
		</a>
	</div>
	<div class="gray-bg">
		<div class="container common-pad">
			<div class="m-title">服务范围</div>
			<div class="m-subTitle">——&nbsp;&nbsp;Service
				scope&nbsp;&nbsp;——</div>
			<div class="flex-box">
				<cms:artType var="fwfw" code="fwfw"></cms:artType>
				<c:forEach items="${fwfw}" var="item">
					<div class="flex-item service-list">
						<span class="iconfont ${item.artTypeDescription}"></span>
						<p class="tit">${item.artTypeName}</p>
						<div class="con">
							<cms:arts var="temp" code="${item.code}"></cms:arts>
							<c:forEach var="item2" items="${temp }" begin="0" end="3">
							<p><a target="blank" href="${path }/redirect/pc/hyxwDetail?id=${item2.artId }&code=${item.code}" >${item2.artTitle }</a></p>
							</c:forEach>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class=" common-pad ">
		<div class="container">
			<cms:art var="gywm" title="关于我们"></cms:art>
			<div class="m-title">${gywm.artTitle }</div>
			<div class="m-subTitle">——&nbsp;&nbsp;About us&nbsp;&nbsp;——</div>
			<div class="flex-box company">
				<img src="${gywm.artImage}" alt="">
				<div class="introduction">
					<h2>${gywm.artLables }</h2>
					<p>${gywm.artAbstract }</p>
					<a href="${path }/redirect/pc/lxwm" class="more">了解更多</a>
				</div>
			</div>
		</div>
	</div>
	<div class="gray-bg">
		<div class="container common-pad">
			<div class="m-title">新闻资讯</div>
			<div class="m-subTitle">——&nbsp;&nbsp;News&nbsp;&nbsp;——</div>
			<div class="news">
				<cms:arts var="item" code="xwzx"></cms:arts>
				<c:forEach items="${item }" var="item" begin="0" end="3">
					<div class="news-list flex-box">
						<div class="article">
							<h2><a  href="${path }/redirect/pc/hyxwDetail?id=${item.artId }&code=xwzx" >${item.artTitle }</a></h2>
							<p><a  href="${path }/redirect/pc/hyxwDetail?id=${item.artId }&code=xwzx" >${item.artAbstract }</a></p>
						</div>
						<div class="time">
							<p class="em"><fmt:formatDate pattern="dd"
								value="${item.artCreatetiem }" /></p>
							<p><fmt:formatDate pattern="yyyy-MM"
								value="${item.artCreatetiem }" /></p>
						</div>
					</div>
				</c:forEach>
				<div class="text-center">
					<a href="${path }/redirect/pc/xwzx?pageNow=0" class="more ">了解更多</a>
				</div>
			</div>
		</div>
	</div>
	<div class="container common-pad cases">
		<div class="m-title">成功案例</div>
		<div class="m-subTitle">——&nbsp;&nbsp;Success&nbsp;&nbsp;cases——</div>
		<div class=" flex-box">
			<cms:arts var="cgan" code="cgan"></cms:arts>
			<c:forEach var="art" items="${cgan }" begin="0" end="3" >
			<div class="case-list">
				<a target="blank"
							href="${path }/redirect/pc/hyxwDetail?id=${art.artId }&code=cgan" ><img src="${art.artImage }" alt=""></a>
				<div class="txt">
					<p>${art.artTitle}</p>
				</div>
			</div>
			</c:forEach>
		</div>
		<div class="text-center">
			<a href="${path }/redirect/pc/cgal" class="more ">了解更多</a>
		</div>
	</div>
	

	<jsp:include page="_foot.jsp"></jsp:include>
	<script src="${path }/resource/js/plugin/jquery-3.2.1.min.js"></script>
	<script
		src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="${path }/resource/js/plugin/swiper.min.js"
		type="text/javascript" charset="utf-8"></script>
	<script>
		var index = $("#selextTitle").data("index")
		$(".nav-list").eq(index).addClass("active");
	</script>
</body>
</html>
